package myJs.common

import com.softwaremill.quicklens._
import myJs.Implicits._
import myJs.common.loadSample.LoadSample
import myJs.cps.{PureDateTimePickerCp, PureSelectCp, Style}
import myJs.myPkg.reactHookForm._
import myJs.tool.Tool
import shared.pojo.Sample.{CommentData, SampleInfo}
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useEffect
import slinky.web.html._

import scala.scalajs.js.Date

/**
 * Created by yz on 21/1/2022
 */
@react object CommentCp {

  val curPage = LoadSample

  case class Props(
                    useForm: UseFormRT,
                    sampleInfo: SampleInfo,
                    sampleInfoChange: SampleInfo => Unit
                  )

  val component = FunctionalComponent[Props] { props =>

    val useFieldArray = ReactHookForm.useFieldArray(UseFieldArrayOptions(
      control = props.useForm.control,
      name = "comments"
    ))

    object FTool {

      def timeChange(curI: Int) = (v: String) => {
        val curSampleInfo = props.sampleInfo.modify(_.comments.index(curI).time).setTo(v)
        props.sampleInfoChange(curSampleInfo)
      }

      def methodChange(curI: Int) = (v: String) => {
        val curSampleInfo = props.sampleInfo.modify(_.comments.index(curI).method).setTo(v)
        props.sampleInfoChange(curSampleInfo)
      }

      def amountChange(curI: Int) = (v: String) => {
        val curSampleInfo = props.sampleInfo.modify(_.comments.index(curI).amount).setTo(v)
        props.sampleInfoChange(curSampleInfo)
      }

      def testerChange(curI: Int) = (v: String) => {
        val curSampleInfo = props.sampleInfo.modify(_.comments.index(curI).tester).setTo(v)
        props.sampleInfoChange(curSampleInfo)
      }

      def deleteComment(curI: Int) = () => {
        val curSampleInfo = props.sampleInfo.modify(_.comments).using { x =>
          x.removedByI(curI)
        }
        props.sampleInfoChange(curSampleInfo)
        useFieldArray.remove(curI)
      }

      def addComment = () => {
        val tester = Tool.getAccount
        val time = Tool.formatDateTime(new Date(), showSecond = false)
        val curSampleInfo = props.sampleInfo.modify(_.comments).using { testInfo =>
          testInfo :+ CommentData(time = time, tester = tester)
        }
        props.sampleInfoChange(curSampleInfo)
        useFieldArray.append(CommentData(time = time, tester = tester))
      }

    }

    val methodMap = List("增耗", "减耗").optionMap


    div(className := "form-group",
      label(className := "control-label col-sm-2", "备注:"),
      div(className := "col-sm-10",

        useFieldArray.fields.toList.zipWithIndex.map { case (item, curI) =>
          val commentData = props.sampleInfo.comments(curI)
          val fieldNames = List(s"comments.${curI}.amount", s"comments.${curI}.tester")
          val noValid = fieldNames.exists(props.useForm.formState.errors.deepDefinedAt(_))
          val hasErrorCls = if (noValid) "has-error" else ""
          div(key := s"${item.id}",
            div(className := s"form-group ${hasErrorCls}",
              label(className := "control-label col-sm-1", "时间:"),
              div(className := "col-sm-3",
                PureDateTimePickerCp(name = "time",
                  value = commentData.time,
                  onChangeF = FTool.timeChange(curI), pattern = "yyyy-mm-dd hh:ii")
              ),
              div(className := "col-sm-3", style := Style(),
                div(className := "input-group",
                  PureSelectCp(name = "method", width = "30%",
                    optionMap = methodMap,
                    value = commentData.method, onChange = FTool.methodChange(curI)),
                  PureInputCp(useForm = props.useForm, name = s"comments.${curI}.amount", value = commentData.amount,
                    onChange = FTool.amountChange(curI), width = "70%",
                    registerOptions = {
                      val info = "增/减耗量"
                      RegisterOptions(
                        required = ValidationValueMessage(value = true, message = s"${info}不能为空！"),
                      )
                    }
                  )
                )
              ),
              label(className := "control-label col-sm-1", "实验员:"),
              div(className := "col-sm-2",
                PureInputCp(useForm = props.useForm, name = s"comments.${curI}.tester", value = commentData.tester,
                  onChange = FTool.testerChange(curI),
                  registerOptions = {
                    val info = "实验员"
                    RegisterOptions(
                      required = ValidationValueMessage(value = true, message = s"${info}不能为空！"),
                    )
                  }
                )
              ),
              div(className := "col-sm-2",
                button(`type` := "button", className := "btn btn-default", onClick := FTool.deleteComment(curI),
                  span(className := "fa fa-trash", " 删除"),
                ),
              )

            ),

          )

        },

        div(className := "form-group",
          div(className := "actions col-sm-6",
            button(`type` := "button", className := "btn btn-default", onClick := FTool.addComment,
              span(className := "fa fa-plus", s" 新增备注")
            ),
          )
        ),

      ),
    )


  }


}
